<template>
  <view class="order-index">
    <view class="status">
      <order-status-com  :default-index="statusIndex"  @statusClicked="statusClicked" ></order-status-com>
    </view>
    <view class="list">
      <orders-list-com v-if="condition" :status="condition" :orders="pageItems" :default-index="statusIndex"></orders-list-com>
			<!-- <view class="no-more" v-if="pageHasNoMore" :class="[pageItems.length==0?'nodata':'']">
			  --- 没有更多数据了 ---
			</view> -->
			<view class="no-more" v-if="pageHasNoMore&&pageItems.length!=0" >
			  --- 没有更多数据了 ---
			</view>
			<view class="nodata-box" v-if="pageHasNoMore&&pageItems.length==0">
				<image src="/static/images/nodata-icon.png" mode="" class="nodata-icon"></image>
				<view class="nodata-text">暂无订单信息～</view>
			</view>
    </view>
		<image class="return-top" mode="aspectFit" v-if="isTopButtonShow" @click="returnTop" src="/static/images/return-top.png"></image>
  </view>
</template>

<script>
import Pagination from "mixins/Pagination"
import OrderStatusCom from "components/order/OrderStatusCom"
import OrdersListCom from "components/order/OrdersListCom"
import {getOrders} from "api/orderApi"
import store from "store"
import {mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: "index",
	store,
	computed:{
		...mapGetters([
			'user',
			'statusBar',
			'isLogin'
		])
	},
  mixins: [Pagination],
  components: {
    OrdersListCom,
    OrderStatusCom
  },
  data: () => ({
    statusIndex: 0,
    condition: '',
		isTopButtonShow: false
  }),
  methods: {
    statusClicked(params) {
      this.statusIndex = params.index
      this.condition = params.status
      this.initPage()
      this.loadPageData()
    },
    async loadPageItems() {
      return await getOrders({
        page: this.pageNumber,
        condition: this.condition,
        include: 'items.sku.product'
      })
    },
		returnTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 100
			})
		}
  },
  onLoad(options) {
    this.statusIndex = parseInt(options.index)
    this.condition = options.status
  },
	async onShow() {
		if(await this.isLogin){
			this.loadPageData()
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
		if (e.scrollTop >= 42) {
			this.isTopButtonShow = true
		} else {
			this.isTopButtonShow = false
		}
	}
}
</script>

<style lang="scss" scoped>
	.card .structure .head .title{
		font-size: 12px!important;
	}
	.return-top {
		width: 96rpx;
		height: 96rpx;
		position: fixed;
		bottom: 280rpx;
		right: 32rpx;
		
	}
	.no-more{
		text-align: center;
		font-size: 26rpx;
		color:#999999;
		margin-top: 30rpx;
	}
	.nodata{
		width: 100%;
		height: 50rpx;
		position: absolute;
		left:0;
		top:0;
		right:0;
		bottom:0;
		margin:auto;
	}
	.nodata-box{
		width: 100%;
		height: 390rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		left:0;
		right: 0;
		top:0;
		bottom: 0;
		margin: auto;
	}
	.nodata-icon{
		display: block;
		width: 498rpx;
		height: 438rpx;
	}
	.nodata-text{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 36rpx;
	}
</style>
